<template>
	<view class="progressBar">
		<view class="">
			<view> {{title}}<text v-if="title=='订单'">(无差评) </text> </view>
			<view> <text>{{(userActivityBadcount>=0?userActivityBadcount: min)||0}}</text>/<text>{{max||0}}</text>
			</view>
		</view>
		<!-- 进度条 -->
		<view>
			<view
				:style="{width: `${userActivityBadcount>=0?(  (userActivityBadcount==0&&585)||((max-userActivityBadcount>0)?585:(585/max*(max-( Math.abs((max-userActivityBadcount)))) ) )):(585/max*min>585?585:(585/max*min)) }rpx`  }">
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		name: 'progressBar',
		props: {
			title: {
				type: String,
				default: '订单'
			},
			max: {
				type: [Number, String],
				default: 0
			},
			min: {
				type: [Number, String],
				default: 0
			},
			userActivityBadcount: {
				type: [Number, String],
				default: -1
			}
		},
		data() {
			return {}
		},
		medths: {}
	})
</script>
<style lang="scss" scoped>
	.progressBar {
		margin-top: 28rpx;

		&>view:first-child {
			display: flex;
			justify-content: space-between;
			width: 100%;

			&>view:nth-child(1) {
				font-size: 28rpx;
				color: #F2375A;

				&>text {
					font-size: 20rpx;
				}
			}

			&>view:nth-child(2) {
				font-weight: bold;
				color: #EA0023;

				&>text:first-child {
					font-size: 34rpx;
				}

				&>text:last-child {
					font-size: 24rpx;
				}
			}
		}

		&>view:last-child {
			width: 585rpx;
			height: 16rpx;
			background: rgba(235, 7, 61, 0.1);
			border-radius: 8rpx;
			margin-top: 20rpx;
			position: relative;

			&>view {
				position: absolute;
				top: 0;
				left: 0;
				height: 16rpx;
				background: linear-gradient(90deg, #FFB061 0%, #ED3B4F 100%);
				border-radius: 8rpx;
				transition: width ease-in-out 0.9s;
			}
		}
	}
</style>